<template name="sendcar">
	<!-- 库存物资列表物资列表 -->
	<view class="mypage">
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="请输入物资名称" v-model="keyword" />
				<input type="text" placeholder="请输入物资规格" v-model="keyword2" />
			</view>
			<view class="action">
				<button class="cu-btn bg-blue shadow-blur round" @tap="handelSearch">搜索</button>
			</view>
		</view>
<!-- @click="openDetail(index)" -->
		<view class="card-list-wrapper">
			<view class="card-list-row radius shadow-warp bg-white margin-top" v-for="(item,index) in planList" :key="index"
			 >
				<view class="flex-just-between bottom-border top-wrap">
					<text class="text-blue text-bold">物资单号：{{ item.PK_MATERIAL || item.BILLNO }}</text>
					<view class="cu-capsule radius">
						<view class="cu-tag bg-blue sm">
							<text class="cuIcon-medal"></text>
						</view>
						<view class="cu-tag line-brown sm">{{ index+1}}</view>
					</view>
				</view>
				
				

				<view class="card-list-row-1 margin-top">
					<text class="cuIcon-title text-red"></text>
					<text>名称：{{ item.MATERIALNAME ||  item.VNAME || '' }}</text>
				</view>

				<view class="card-list-row-1">
					<text class="cuIcon-title text-orange"></text>
					<text>规格：{{ item.MATSPEC || '' }}</text>
				</view>

				<view class v-if="category=='ST_STOCKINFO' ">
					<view class="card-list-row-1">
						<text class="cuIcon-title text-orange"></text>
						<text>库存总量：{{ item.TOTALNUM  }}({{ item.UNIT || '' }})</text>
					</view>
					<!-- <view class="card-list-row-1">
					  <text class="cuIcon-title text-orange"></text>
					  <text>货位：{{ item.STATIONNAME }})</text>
					</view> -->
					<view class="card-list-row-1" v-for="(itemS,indexS) in mapSattionName(item.VBDEF18)">
						<text class="cuIcon-title text-red"></text>
						<text>{{ indexS+1 }}号货位：{{ itemS.STATIONNAME || '' }}/{{ itemS.KCNUM }} {{ item.UNIT }}</text>
					</view>
				</view>

				<view class="position-a checkFlag" v-if="item.ischeck">
					<text class="cuIcon-squarecheckfill text-blue"></text>
				</view>

				<view class="flex-just-center top-border margin-top btn-wrap">
					<block>
						
						<button class="cu-btn round lines-blue" v-if="bsType==1"
						@click="onSite(item,1)">物资巡检</button>
						
						<button class="cu-btn round lines-blue" v-if="bsType==2"
						@click="onSite(item,2)">使用反馈</button>
						
						<button class="cu-btn round lines-blue" v-if="bsType==3"
						@click="onSite(item,3)">状态维护</button>
						
						<button class="cu-btn round lines-blue" v-if="bsType==4"
						@click="onSite(item,4)">物资报废</button>
						
					</block>
				</view>

			</view>
		</view>
		
		<view class="operation" v-if="bsType==4">
			<view class="operation-button border-right" @click="switchMater">
				{{ switchBtn }}
			</view>
		</view>

		

		<modal title="高级查询" placeholder :isShow="isShowModal" @cancelModal="cancelModal" @okModal="okModal"></modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import api from "@/common/api.js";
	import utils from "@/common/util.js";
	import modal from "@/components/modal/modal_mater.vue";
	let query = {
		category: "",
		page: 1,
		rows: "10",
		sidx: "CREATIONTIME",
		sord: "desc",
		queryJson: "",
		TYPE: "ALL",
		userId: "",
		account: ""
	};
	let _self,
		menuType,
		page = 1,
		billID,
		total = 1,
		goPath = "",
		pageTitle = "基础物资列表(",
		queryJson = {};

	export default {
		computed: mapState(["userInfo", "baseUrl", "checkData"]),
		data() {
			return {
				planList: [],
				keyword: "",
				keyword2: "",
				category: "",
				isShowModal: false,
				bsType: 1 ,
				switchBtn:'现场物资'
			};
		},

		onLoad(p) {
			// console.log(p)
			_self = this;
			this.setCheckData([]);
			menuType = ' ST_OUTSTOCK_DTL';
			queryJson.PK_STORE = p.PK_STORE
			this.bsType = p.type
			this.initData();
		},
		components: {
			modal
		},
		onNavigationBarButtonTap(e) {
			this.openScanMater();
		},
		onShow() {
			// 刷新列表
			uni.$once("refreshList", () => {
				page = 1;
				total = 1;
				this.getList();
			});
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			page = 1;
			total = 1;
			queryJson.PK_ORG = _self.userInfo.ORGANIZEID;
			_self.planList = [];
			// queryJson = "";
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			uni.showToast({
				title: "数据已刷新",
				icon: "none"
			});
		},
		// 加载更多
		onReachBottom: function() {
			this.getList();
		},
		
		methods: {
			...mapMutations(["setCheckData"]),
			initData() {
				// query.category = "ST_STOCKINFO";
				query.category = 'ST_OUTSTOCK_DTL'
				query.userId = _self.userInfo.UserId;
				query.account = _self.userInfo.Account;
				queryJson.PK_ORG = _self.userInfo.ORGANIZEID;
				this.category = query.category;
				page = 1;
				total = 1;
				this.getList();
			},
			
			// 扫描物资
			openScanMater() {
				let URL =  api.apiPublic.ScanCode;
				this.$utils.Scan(URL, item => {
					console.log( 'openScanMater', item );
					page = 1;
					total = 1;
					_self.planList = [item];
					_self.setPageTitle('库存物资列表(1)');
				});
			},

			// STATIONNAME 遍历货位
			mapSattionName(data) {
				if (!data) return [];
				let arr = JSON.parse(data);
				return arr;
			},
			
			switchMater(){
				query.category = query.category=='ST_OUTSTOCK_DTL'?'BD_MATERIAL':'ST_OUTSTOCK_DTL'
				page = 1;
				total = 1;
				_self.planList = [];
				this.getList();
				this.switchBtn = query.category == 'BD_MATERIAL' ? '库存物资':'现场物资' 
			},

			openDetail(e) {
				_self.planList[e].ischeck = !_self.planList[e].ischeck;
				_self.planList[e].myIndex = e;
			},
			handelSearch() {
				// queryJson.BILLNO = _self.keyword;
				let a = {
					MATSPEC: _self.keyword2,
					MATERIALNAME: _self.keyword,
					VNAME: _self.keyword,
					BILLNO: "",
					PK_ORG: _self.userInfo.ORGANIZEID
				};
				queryJson = { ...a
				};
				page = 1;
				total = 1;
				_self.planList = [];
				this.getList();
			},
					
			onSite(data,t){
				uni.navigateTo({
					url: '/pages/tab02/onsite?t='+t+'&item=' + encodeURIComponent(JSON.stringify(data))
				});
			},

			// 生成盘点单 并进行盘点录入
			// 返回 PK_ORG(组织id),ORGNAME(组织名称), PK_STORE（仓库id），STORENAME（仓库名称）
			// PK_STATION(货位ID)，STATIONNAME（货位名称）:'',
			inventorySubmit(data) {
				let saveData = {
						BILLNO: "",
						BDATAFROM: 1,
						APPFLAG: 1 ,
						PK_GROUP: _self.userInfo.PK_GROUP,
						GROUPNAME: _self.userInfo.GROUPNAME,
						PK_ORG: _self.userInfo.PK_ORG,
						ORGNAME: _self.userInfo.GROUPNAME,
						PK_STORE: '',
						STORENAME: '',
						PK_STATION: '',
						STATIONNAME: "", // 货位
						PK_STOREAREA: "", // 货区id
						STOREAREANAME: "", // 货区id
						PK_STORESHELVES: "", // 货架id
						STORESHELVESNAME: "", // 货架id
						PK_STORELAYER: "", // 货层
						STORELAYERNAME: "", // 货层
						VDEF1: "", // 位置id
						BDATAFROM: 1,
						PK_RACK: '',
						RACKNAME: '',
						PK_INVER: _self.userInfo.UserId,
						INVER: _self.userInfo.REALNAME,
						VMEMO: "",
						account: _self.userInfo.Account,
						userId: _self.userInfo.UserId,
						detail: ''
					}
				uni.showModal({
					title:'提示' ,
					content:'请扫描物资二维码进行核对物资后方可进行操作盘点。',
					success(res) {
						if(res.confirm){
							let URL =  api.apiPublic.ScanCode;
							_self.$utils.Scan(URL, item => {
									if(item.PK_MATERIAL != data.PK_MATERIAL){
										return utils.tips("二维码中的数据和该物资不匹配");
									}
									saveData.detail = JSON.stringify([item])
									_self.inventorySubmitAjax(saveData) // 执行提交生成盘点单
							})
						}
					}
				})
			},
			// 执行提交生成盘点单
			inventorySubmitAjax(saveData){
					let  saveURL = api.apiPublic.checkListSubmit;
					// console.log(data);
					console.log(saveData);
					this.axios({
						url: saveURL ,
						data: saveData,
						isLoading:1
					}).then(res=>{
						let { Result } = res ;
						let id = Result[0].BILLNO;
						let a = Result[0].DTL ;
						uni.navigateTo({
						  url: `/pages/tab01/inventory/new_submit_mater?id=${id}&data=${encodeURIComponent(
						    JSON.stringify(a)
						  )}`
						});
						// this.setCheckData(data);
						console.log(res);
					})
			},

			getList() {
				// console.log(page , total);
				if (page > total) {
					return utils.tips("没有数据了");
				}
				query.page = page;
				query.queryJson = JSON.stringify(queryJson);
				console.log(query);
				let URL =  api.apiPublic.getMaterList;
				this.axios({
					url: URL,
					data: query,
					isLoading: 1
				}).then(res => {
					let {
						IsSuccess,
						Result,
						Message
					} = res;
					let array = Result.rows.map(item => {
						item.ischeck = false;
						item.myindex01 = 0;
						if(query.category=='BD_MATERIAL'){
							item.PK_MATERIAL = item.BILLNO
							item.MATERIALNAME =  item.VNAME
						}
						return item;
					});
					_self.planList = [..._self.planList, ...array];
					let TNTName = query.category=='ST_OUTSTOCK_DTL' ?'库存物资列表(' : '现场物资列表'
					_self.setPageTitle(  TNTName + Result.records + ")");
					total = Result.total;
					page++;
					// console.log(JSON.stringify(res))
				})
			},
			setPageTitle(d) {
				// console.log(d);
				uni.setNavigationBarTitle({
					title: d
				});
			},

			// 控制高级查询条件
			cancelModal() {
				this.isShowModal = false;
			},
			okModal(val) {
				this.cancelModal();
				queryJson = { ...val
				};
				page = 1;
				total = 1;
				_self.planList = [];
				this.getList();
			},
		}
	};
</script>

<style>
	page {
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.card-list-wrapper {
		width: 710upx;
		margin: 0 auto;
	}

	.card-list-row {
		padding: 20upx;
	}

	.card-list-row-1 {
		padding: 10upx 0;
	}



	.top-border {
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.top-wrap {
		padding-bottom: 20upx;
	}

	.bottom-border {
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.btn-wrap {
		padding-top: 20upx;
	}

	.checkFlag {
		top: 50%;
		right: 20upx;
		font-size: 40upx;
	}

	.next-btn-wrap {
		position: fixed;
		right: 50upx;
		bottom: 100upx;
	}

	.big-btn {
		width: 100upx;
		height: 100upx;
		border-radius: 50upx;
		font-size: 40upx;
	}
</style>
